<ion-app data-testid="c-app">
	<ion-menu type="overlay" contentId="main" [menuId]="menuId" id="sidebar">
		<ion-content>
			<div class="p-8 mb-4">
				<img
					src="/assets/img/logo-no-shadow.png"
					width="70"
					height="70"
				/>
				<ion-text color="dark">
					<h4 class="text-xl font-semibold mt-4 whitespace-normal">
						{{ profile?.name }}
					</h4>
				</ion-text>
				<ion-text color="medium">
					<p>{{ network?.name }}</p>
				</ion-text>
			</div>

			<ion-list inset lines="none">
				<ion-item detail (click)="openPage('/wallets')">
					<ion-icon name="wallet-outline" slot="start"></ion-icon>
					{{ "WALLETS_PAGE.WALLETS" | translate }}
				</ion-item>
				<ion-item detail (click)="openPage('/delegates', false)">
					<ion-icon
						name="people-circle-outline"
						slot="start"
					></ion-icon>
					{{ "DELEGATES_PAGE.DELEGATES" | translate }}
				</ion-item>
				<ion-item detail (click)="openPage('/network-status', false)">
					<ion-icon name="wifi-outline" slot="start"></ion-icon>
					{{ "NETWORKS_PAGE.NETWORK_STATUS" | translate }}
				</ion-item>
				<ion-item detail (click)="openPage('/settings', false)">
					<ion-icon
						ios="cog-outline"
						md="settings-outline"
						slot="start"
					></ion-icon>
					{{ "SETTINGS_PAGE.SETTINGS" | translate }}
				</ion-item>
				<ion-item detail (click)="openPage('/contacts', false)">
					<ion-icon name="people-outline" slot="start"></ion-icon>
					{{ "CONTACTS_PAGE.CONTACTS" | translate }}
				</ion-item>
			</ion-list>
		</ion-content>

		<ion-footer class="ion-no-border ion-no-shadow">
			<ion-list inset lines="none">
				<ion-item detail (click)="logout()">
					<ion-icon name="log-out-outline" slot="start"></ion-icon>
					{{ "SIGN_OUT" | translate }}
				</ion-item>
			</ion-list>
		</ion-footer>
	</ion-menu>

	<ion-router-outlet
		id="main"
		[class.hidden]="hideRouter"
	></ion-router-outlet>
</ion-app>
